<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>
      {{'explore_title' | translate}}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" style="--ion-text-color: var(--ion-color-medium);" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>
  </ion-refresher>
  <ion-grid>
    <ion-row class="explore">
      <ion-col size="4" size-md="3" size-xl="2" class="explore-category" *ngFor="let explore of explores">
        <ion-item lines="none" detail="false" class="explore-item" [routerLink]="explore.link"
          routerDirection="forward">
          <ion-label class="ion-text-center ion-no-margin">
            <ion-icon [name]="explore.icon" [color]="explore.color" class="explore-category-icon"></ion-icon>
            <h6 class="explore-category-title">{{explore.id | translate}}</h6>
          </ion-label>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>